<template>
  <div class="movie-price-edit">
    <el-row class="align-stretch" type="flex" :gutter="20">
      <el-col :span="9">
        <div class="bordered">
          <h4 class="section-title ml-20 mt-20">影片信息</h4>
          <div class="flex align-stretch base-info mt-20">
            <div class="poster-wrap flex justify-center align-center">
              <el-image :src="detail.poster || noimg" fit="fill">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <div class="flex-sub">
              <p class="info-item movie-name">
                {{detail.name}}<span class="ml-20 fs-sm">{{detail.englishName}}</span>
              </p>
              <p class="info-item mt-10">
                <span
                  class="mr-10"
                  v-for="(format, index) in detail.formats"
                  :key="index"
                >{{format}}</span>
              </p>
              <p class="info-item  mt-10">电影类型：{{detail.types || '无'}}</p>
              <p class="info-item  mt-10">电影地区：{{detail.area  || '无'}}</p>
              <p class="info-item  mt-10">片长：{{detail.length  || '0'}}分钟</p>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="bordered">
          <h4 class="section-title ml-20 mt-20">
            {{brand.name}} <span>今日共计排片<strong>{{totalViewCount}}</strong>场</span>
          </h4>
          <div class="flex align-stretch">
            <div class="ml-20 mt-20 flex-center brand-poster">
              <el-image :src="detail.poster || noimg" fit="fill">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <ul class="flex-sub mt-20 text-center site-count">
              <li>
                <p>一级站点</p>
                <strong>{{viewCount.ONE}}</strong>
              </li>
              <li>
                <p>三级级站点</p>
                <strong>{{viewCount.THREE}}</strong>
              </li>
            </ul>
            <ul class="flex-sub mt-20 text-center site-count">
               <li>
                  <p>二级站点</p>
                  <strong>{{viewCount.TWO}}</strong>
                </li>
                <li>
                  <p>四级站点</p>
                  <strong>{{viewCount.FOUR}}</strong>
                </li>
            </ul>
          </div>

          <div class="mt-20 mr-20 text-right">
            <el-button type="primary" size="small" @click="showSwitchDialog">切换品牌</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bordered">
          <h4 class="section-title ml-20 mt-20">溢价设置</h4>
          <div class="flex align-stretch">
            <ul class="flex-sub mt-20 text-center site-count">
              <li>
                <p>一级站点</p>
                <strong>￥{{overflowPrice.ONE}}</strong>
              </li>
              <li>
                <p>三级级站点</p>
                <strong>￥{{overflowPrice.THREE}}</strong>
              </li>
            </ul>
            <ul class="flex-sub mt-20 text-center site-count">
               <li>
                  <p>二级站点</p>
                  <strong>￥{{overflowPrice.TWO}}</strong>
                </li>
                <li>
                  <p>四级站点</p>
                  <strong>￥{{overflowPrice.FOUR}}</strong>
                </li>
            </ul>
          </div>
          <div class="mt-20 mr-20 text-right">
            <el-button type="primary" size="small" @click="showOverflowPriceEdit">批量编辑</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <price-edit-table :movieId="movieId" :brandId="brandId"></price-edit-table>

    <brand-switch-dialog ref="switchDialog" @brandChange="brandChange"></brand-switch-dialog>
    <overflow-price-dialog ref="overflowPriceDialog" @overflowPriceChange="overflowPriceChange"></overflow-price-dialog>
  </div>
</template>

<script>
import {brandDetail} from '@/api/brand';
import { movieDetial, movieScheduleByBrand, movieOverflowPriceList } from "@/api/viewing";
import noimg from '@/assets/images/noimg.png';
import BrandSwitchDialog from './BrandSwitchDialog';
import OverflowPriceDialog from './OverflowPriceDialog';
import PriceEditTable from './PriceEditTable';

export default {
  components: {BrandSwitchDialog, OverflowPriceDialog, PriceEditTable},
  data() {
    return {
      movieId: 0,
      brandId: 0,
      brand: {},
      detail: {},
      noimg,
      overflowPrice: {},
      viewCount: {
        ONE: 0,
        TWO: 0,
        THREE: 0,
        FOUR: 0,
      },
    };
  },
  computed: {
    totalViewCount() {
      const {viewCount} = this;
      return viewCount.ONE + viewCount.TWO + viewCount.THREE + viewCount.FOUR;
    }
  },
  methods: {
    async requestDetail() {
      try {
        const { data } = await movieDetial(this.movieId);
        let { formats, otherStaffs } = data;
        data.formats = formats.split(";");
        otherStaffs = JSON.parse(otherStaffs);
        data.otherStaffs = Object.keys(otherStaffs).map(key => {
          return { type: key, value: otherStaffs[key].join("；") };
        });
        this.detail = data || {};
      } catch (error) {}
    },
    async brandDetail() {
      try {
        const { data } = await brandDetail(this.brandId);
        this.brand = data || {};
      } catch (error) {}
    },
    // 品牌电影拍片信息
    async movieScheduleByBrand(level) {
      try {
        const { data } = await movieScheduleByBrand(this.movieId, this.brandId, level);
        return data;
      } catch (error) {}
    },
    // 溢价列表
    async movieOverflowPriceList() {
      try {
        const { data } = await movieOverflowPriceList();
        let overflowPrice = {};
        data.forEach(item => {
          overflowPrice[item.level] = item.price
        })
        this.overflowPrice = overflowPrice;
      } catch (error) {}
    },
    getMovieSchedule() {
      const {viewCount} = this;
      Object.keys(viewCount).forEach(async (key) => {
        console.log(key)
        if (!key) {
          return;
        }
        viewCount[key] = await this.movieScheduleByBrand(key);
      })
    },
    showSwitchDialog() {
      this.$refs.switchDialog.show();
    },
    showOverflowPriceEdit() {
      this.$refs.overflowPriceDialog.show();
    },
    brandChange(brand) {
      this.brand = brand;
      this.brandId = brand.id;
      this.getMovieSchedule()
    },
    overflowPriceChange() {
      this.movieOverflowPriceList();
    },
    cancel() {
      this.$router.go(-1);
    }
  },
  created() {
    let { movieId, brandId } = this.$route.params;
    if (!movieId) {
      this.cancel();
    } else {
      this.movieId = movieId;
      this.brandId = brandId;

      this.requestDetail();
      this.brandDetail();
      this.movieOverflowPriceList();
      this.getMovieSchedule()
    }
  }
};
</script>
<style lang="scss">
  .movie-price-edit{
      .el-image{
        height: 100%;
      }
  }
</style>
<style lang="scss" scoped>
.movie-price-edit {
  color: #333;
}
.bordered {
  height: 100%;
  border: 1px solid #e9e9e9;
}
.section-title {
  font-size: 18px;
  font-weight: normal;
}

.base-info {
  padding: 0 20px;
  margin-bottom: 60px;
  color: #333333;

  .poster-wrap {
    width: 106px;
    height: 154px;
    margin-right: 5%;
    text-align: center;
    font-size: 50px;
    background-color: #f2f2f2;
    color: #999999;
  }

  .movie-name {
    font-size: 20px;
    font-weight: normal;
  }

  .movie-format {
    font-size: 14px;
  }

  .movie-type {
    margin-top: 20px;
  }
}

.brand-poster{
  width: 140px;
  height: 140px;
  background-color: #f2f2f2;
}

.site-count{
  color: #999999;
  font-size: 14px;

  li:nth-child(2) {
    margin-top: 50px;
  }

  strong{
    font-size: 18px;
    color: #333;
  }
}
</style>